import React, { Component } from 'react';
import styles from './Menu.less';
import { Button } from '../Button'
// import styles_less from './Menu.less';
export default class Menu extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	makeMenu(data) {
		return (
			Object.keys(data).map((key) => {
				return (
					<li >
						{
							data[key].attachment ?
								<Button style={{ margin: '5px auto' }}>
									<span>{key}</span>
									{data[key].attachment}
								</Button> :
								<Button style={{ margin: '5px auto' }}>{key}</Button>
						}

						<div className={styles.second}>
							<div className={styles.subli}>
								{
									data[key].data.map(a => {
										return (a);
									})
								}
							</div>
							<iframe className={styles.help} />
						</div>
					</li>
				)
			}
			)
		)

	}
	componentDidMount() {
		this.setState({ menuItem: this.makeMenu(this.props.menuData) });
	}
	render() {
		return (
			<div className={styles.nav}>
				{
					this.state.menuItem || null
				}
			</div>
		)
	}
}